<template>
  <div class="addBank">
    <ComNavBar :title="t('Add Bank Information')" />

    <div class="container">
      <div class="card_img">
        <div class="card_name">
          <img src="@/assets/images/bank_status.svg" alt=""srcset="" class="bank-icon">
          <div>
            <div>{{t('Bank')}}</div>
            <div>{{t('Bank Name')}}</div>
          </div>
        </div>
        <div class="card_num">
          <div>****</div>
          <div>****</div>
          <div>****</div>
          <div>****</div>
        </div>
        <div class="card_code">
          <div>
            <p>{{t('security code')}}</p>
            <p>****</p>
          </div>
          <p></p>
        </div>
        <div></div>
      </div>
      <div class="tips">{{t('Please add your bank card that is not bound')}}</div>

      <van-field v-model="form.bankName" :border="false" input-align="right" :label="t('Bank Name')" type="text" :placeholder="t('Bank Name')" />

      <van-field v-model="form.bankAccountNumber" :border="false" input-align="right" :label="t('Bank Account Number')" type="text" :placeholder="t('Bank Account Number')" />

      <van-field v-model="form.name" :border="false" input-align="right" :label="t('Name')" type="text" :placeholder="t('Name')" />

      <van-field v-model="form.phone" :border="false" input-align="right" :label="t('Mobile Number')" type="text" :placeholder="t('Mobile Number')" />

      <van-field v-model="form.ifsc" :border="false" input-align="right" :label="t('IFSC Code')" type="text" :placeholder="t('IFSC Code')" />


      <div class="btn" @click="handleFunc">{{t('Add')}}</div>
    </div>
  </div>
</template>
<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showSuccessToast } from 'vant'
import { post } from '@/utils/request'
import { t } from '@/languages'
const form = reactive({
  bankName: '',
  bankAccountNumber: '',
  name: '',
  phone: '',
  ifsc: ''
})


const $router = useRouter()

async function handleFunc() {
  const { name, bankName, bankAccountNumber, phone, ifsc } = form

  if (!name || !bankName || !bankAccountNumber || !ifsc || !phone) {
    let msg = ''
    !name && (msg = t('Name cannot be empty'))
    !bankName && !msg && (msg = t('Bank Name cannot be empty'))
    !bankAccountNumber && !msg && (msg = t('Bank Account Number cannot be empty'))
    !phone && !msg && (msg = t('Mobile Number cannot be empty'))
    !ifsc && !msg && (msg = t('IFSC Code cannot be empty'))
    return showToast(msg)
  }

  try {
    const res = await post(`/api/app/bank/`, {
      name: bankName,
      code: bankAccountNumber,
      owner: name,
      ifsc,
      phone
    })

    console.log(res)

    showSuccessToast(t('Add success'))

    $router.go(-1)

  } catch (error) {
    console.log(error)
  }

}
</script>
<style lang="scss" scoped>
.container {
  padding: .26667rem;
}

.addBank .container .card_img {
  color: #0d111a;
  background: url(@/assets/images/bank_card_bg.png);
  background-size: 100% 100%;
  height: 24vh;
  padding: .4rem;
}

.addBank .container .card_img .card_name {
  display: flex;
  align-items: center;
}

.addBank .container .card_img .bank-icon {
  width: 1.33333rem;
  height: 1.33333rem;
}

.addBank .container .card_img .card_num {
  margin: .4rem 0;
  font-size: .53333rem;
  font-weight: 600;
  display: flex;
  justify-content: space-around;
}

.addBank .container .card_img .card_code {
  margin: 0 .26667rem;
  display: flex;
  justify-content: space-between;
}

.addBank .container .card_img .card_name>div {
  font-size: .42667rem;
  font-weight: 600;
  margin-left: .26667rem;
}

.addBank .container .tips {
  font-size: .4rem;
  font-weight: 600;
  color: #fed45f;
  margin: .13333rem 0 .4rem 0;
  text-align: center;
}


.addBank .container .btn {
  border-radius: .66667rem;
  border: .02667rem solid #325d79;
  background: linear-gradient(270deg, #62f792, #63fddb);
  color: #0d111a;
  margin: 0 .8rem;
  margin-top: .53333rem;
  font-weight: 600;
  height: 1.06667rem;
  line-height: 1.06667rem;
  text-align: center;
}

.van-cell {
  margin-top: .26667rem;
  border-radius: .13333rem;
  border: .02667rem solid #0f3a40;
  background: #0e1822;
}

:deep(.van-field__label) {
  color: #ccc;
  -webkit-box-flex: 0;
  -webkit-flex: none;
  flex: none;
  box-sizing: border-box;
  width: 6.6em;
  margin-right: .32rem;
  text-align: left;
  word-wrap: break-word;
  word-break: auto-phrase;
}

:deep(.van-cell__value) {
  position: relative;
  overflow: hidden;
  color: #969799;
  text-align: right;
  vertical-align: middle;
  word-wrap: break-word;
}

:deep(.van-field__control) {
  color: #fff;
}
</style>
